<template>

  
        <el-row v-for="item,index in state.tasklist" :key="item._id" >
        <el-col :span="24">
            <el-card shadow="never"> 
                No.{{ index+1 }} <el-tag :type="getStatusColor(item.status)" :style="{marginLeft:'10px'}"> {{ item.status === 'doing' ? '进行中' : item.status === 'finished' ? '已完成' : '已逾期' }} </el-tag>
                <h1>{{ item.title }}</h1>    
                <p>{{ item.content }}</p>
                <span>{{ (item.createdAt)  }}</span>
                <span v-if="item.master">发送人:{{ item.master }}</span>
            </el-card>
        </el-col>
    </el-row>
    
 
</template>

<script setup>


import { reactive,defineProps,watch } from 'vue';


const props = defineProps({
    tasklist:Object
})



const state = reactive({
    tasklist:{}
})


const getStatusColor = (status) => {
    return status === "已完成" ? "Success" : status === "进行中" ? "primary" : "warning";
   
}

watch(props,(newValue,old) => {
    state.tasklist = newValue.tasklist
     console.log(newValue.tasklist,old);
},{
    deep:true
})


</script>

<style scoped lang="less">
.el-row{
    padding: 10px;
    .el-col{
        .el-card{
            border-radius: 25px;
            padding: 20px;

            h1{
                font-size: 20px;
            }

            p{
                font-size: 18px;
                line-height: 40px;
                letter-spacing: 2px;
                font-family: pingfang;
            }
        }
        .el-card:hover{
            transition: all 0.4s ease;
            background-color: var(--el-color-primary-light-8);
            padding: 30px;
            h1{
                font-size: 22px;
            }
            p{
                font-size: 22px;
            }
        }
    }
}
</style>